<!-- 二维码名片 -->
<template>
    <view class="page p-re" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/card_bg.png' + ')'}">
        <view class="nav p-ab white" :style="{'line-height': navHeight + 'px', top: System.statusBarHeight + 'px'}">
            <text class="iconfont icon-shouyeT211 size34 bold" v-if="fromShare == 1" @click="backHome()"></text>
            <text class="iconfont icon-xiangzuo size34 bold" v-else @click="back()"></text>
            <text class="size34 bold m-left20">推广名片</text>
        </view>
        <view class="cont" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/code_bg.png' + ')'}">
            <view class="card p-re">
                <view class="d-flex f-column a-center p-top60">
                    <u-avatar :src="$imgUrls(codeInfo.head_img)" size="60"></u-avatar>
                    <view class="size40 m-top40 m-bot20">{{ codeInfo.nick_name }}</view>
                    <text class="label size26 flexac">{{ codeInfo.group_name }}</text>
                    <view class="size26 color_66 m-top40">{{ codeInfo.slogan }}</view>
                </view>
                <view class="text-center p-top90">
                    <image :src="$imgUrls(codeInfo.qr_img)" show-menu-by-longpress mode="aspectFit" class="code m-bot40"></image>
                    <view class="size28 color_44">长按或扫描直达{{ share.title }}</view>
                </view>
                <view class="line p-ab"></view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            codeInfo: '',
            fromShare: 0,
            pid: ''
        }
    },
    computed: {
        ...mapState(['navHeight','System','share','vid'])
    },
    onLoad(e){
        if(e.pid) this.pid = e.pid
        if(e.fromShare) this.fromShare = e.fromShare
        this.getCode()
    },
    methods: {
        getCode(){
            this.$http.get({
                url: '/PrivateSphereApi/getFaceToFacePage',
                data: {
                    pid: this.pid // 分享vid, 查看自己名片不传
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                if(res.data) this.codeInfo = res.data.member_info || ''
            })
        }
    },
    onShareAppMessage(){
        let vid = this.pid || this.vid
        return {
            title: this.codeInfo.nick_name,
            path: `/pages/index/index?share_v_id=${vid}&pageType=14&w=2&pid=${vid}`
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-repeat: no-repeat;
    background-size: cover;
}
.nav {
    left: 30rpx;
}
.cont {
    padding: 180rpx 68rpx 68rpx 68rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .card {
        width: 100%;
        height: 1080rpx;
        >view {
            height: 50%;
        }
        .line {
            width: 576rpx;
            height: 2rpx;         
            background: #9FA0A2;
            border-bottom: 2rpx dashed #FFFDFD;
            left: 50%;
            margin-left: -288rpx;
            top: 498rpx;
        }
        .label {
            height: 50rpx;
            border: 1px solid #4F8FF8;
            border-radius: 25rpx;
            padding: 0 30rpx;
            color: #4F8FF8;
        }
        .code {
            width: 289rpx;
            height: 289rpx;
        }
    }
}
</style>
